// import {
//     init,
//     classModule,
//     propsModule,
//     styleModule,
//     eventListenersModule,
//     h,
// } from "snabbdom";

// const patch = init([
//     // Init patch function with chosen modules
//     classModule, // makes it easy to toggle classes
//     propsModule, // for setting properties on DOM elements
//     styleModule, // handles styling on elements with support for animations
//     eventListenersModule, // attaches event listeners
// ]);

// const container = document.getElementById("container");

// const vnode = h("div#container.two.classes", { on: { click: () => {} } }, [
//     h("span", { style: { fontWeight: "bold" } }, "This is bold"),
//     " and this is just normal text",
//     h("a", { props: { href: "/foo" } }, "I'll take you places!"),
// ]);
// // Patch into empty DOM element – this modifies the DOM as a side effect
// patch(container, vnode);

// const newVnode = h(
//     "div#container.two.classes", { on: { click: function() {} } }, [
//         h(
//             "span", { style: { fontWeight: "normal", fontStyle: "italic" } },
//             "This is now italic type"
//         ),
//         " and this is still just normal text",
//         h("a", { props: { href: "/bar" } }, "I'll take you places!"),
//     ]
// );
// // Second `patch` invocation
// patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
// // 创建虚拟节点
const myVnode1 = h(
    'a', { props: { href: 'http://www.atguigu.com', target: '_blank' } },
    '你好'
)

// const myVNode2 = h('div', { class: { box: true } }, '我是一个盒子')
//     // 让虚拟节点上树
// const container1 = document.getElementById('container1')
//     // patch(container, myVNode1)
// patch(container1, myVNode2)

// 使用自定义的h函数---------------------------------------
import h from './mysnabbdom/h'
// const myVNode3 = h('div', {}, [
//     h('p', {}, '哈哈'),
//     h('p', {}, '嘻嘻'),
//     h('p', {}, '呵呵'),
//     h('p', {}, [h('span', {}, 'aa'), h('span', {}, 'bb')]),
//     h('p', {}, h('span', {}, 'A'))
// ])

// const myVNode4 = h('ul', {}, [
//     h('li', {}, '牛奶'),
//     h('li', {}, '咖啡'),
//     h('li', {}, [h('div', {}, [h('p', {}, '可口可乐'), h('p', {}, '百事可乐')])]),
//     h('li', {}, h('p', {}, '雪碧')),
// ])
// console.log(myVNode3, myVNode4); // 输出虚拟dom树
// 使用自定义的h函数----------------------------------------

// 测试 手写的diff 算法-------------------------------------
import patch from './mysnabbdom/patch'
let container = document.getElementById('container')
let btn = document.getElementById('btn')

const myVnode2 = h('ul', {}, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D'),
    h('li', { key: 'E' }, 'E'),
]);
// 上树
patch(container, myVnode2);
const myVnode5 = h('ul', {}, [
    h('li', { key: 'E' }, 'E'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'Q' }, 'Q'),
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'D' }, 'D'),
    h('li', { key: 'C' }, 'C'),
]);
btn.onclick = function() {
    patch(myVnode2, myVnode5)
}

// 测试 手写的diff 算法-------------------------------------